<template>
  <div class="app">
    <!-- header 头部 商家 -->
    <Header></Header>
    <!-- tabs选项卡 -->
    <div class="tabs">
      <ul>
        <li>
          <router-link to="/goods">商品</router-link>
        </li>
        <li>
          <router-link to="/rating">评价</router-link>
        </li>
        <li>
          <router-link to="/seller">商家</router-link>
        </li>
      </ul>
      <!-- 嵌套路由 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import Header from "./views/header.vue";
import Btns from "./views/tabs/btns.vue";
import { mapState } from "vuex";
export default {
  components: {
    Header,
    Btns,
  },
  computed: {
    //引入store中carList，方便页面使用
    ...mapState(["carList"]),
  },
};
</script>
<style lang="less" scoped>
.app {
  height: 100%;
  position: relative;
}

.tabs {
  height: 79%;
  // background-color: aqua;
  overflow: hidden;

  ul {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);

    li {
      height: 40px;
      line-height: 40px;
      a {
        color: rgb(103, 101, 101);
        font-weight: 540;
      }
    }
  }
}

</style>
